<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/searchBox.js"></script>
<script type="text/javascript">
var english = false;

//searchBox 参数
var searchBox = searchBox || {};
//搜索服务器路径: "/SearchBox/" - 测试环境中的相对路径[默认], URL - 指定URL
searchBox.baseURL = "http://toy.weather.com.cn/SearchBox/";
//searchBox.baseURL = "http://toy.weather.com.cn/SearchBox/";
//语言: "zh" - [默认]
searchBox.language = english ? "en" : "zh";
//用于放置搜索框的html元素ID: "searchBox" - [默认]
searchBox.containerId = "searchBox";
//显示无输入时提示: false - 不显示[默认], true - 显示 "/SearchBox/searchBox/tooltips.txt"中的内容
searchBox.tooltips = true;
//显示无输入时提示按钮: null - 不显示[默认], HTML - 显示内容
searchBox.forMouserButton = null; // "<span class='on-off'>v</span>"
//输入无匹配时显示内容: null - 不显示[默认], HTML - 显示内容
searchBox.whenNoMatches = "<span style='color: #C5111A;'>" + (english ? "Sorry, no matching city found!" : "对不起，未找到您查询的城市天气！") + "</span>";
//提交按钮: null - 不显示[默认], HTML - 显示内容
searchBox.submitButton = "<input class='submit' type='submit' value='' />";
//提交查询的延迟时间: 200[默认], 单位毫秒
searchBox.waitMillis = 200;
//无输入时搜索框默认提示: null - [默认], String - 提示内容
searchBox.defaultValue = english ? "Type name, pinyin to search" : "输入城市名、全拼、简拼、电话区号、邮编查询";
</script>
<style type="text/css">
#searchBox{width:500px;}
#searchBox input.suggest-text {
    height:18px;
	line-height:18px;
}
#searchBox {
    display: block;
    width: 500px;
    margin: 0 auto;
    padding: 0;
}
#searchBox * {
    line-height: 20px;
}
#searchBox form {
    margin: 0;
}
#searchBox input.suggest-text {
    width: 400px;
    height: 22px;
    font-size: 18px;
    font-family: Verdana;
    border-color: #F9B919;
	margin-right:6px;
	line-height:22px;
}
#searchBox input.suggest-text.description {
    color: #666666;
}
#searchBox .suggest-list,
#searchBox .suggest-addition {
    border-color: #C2D0E7;
}
#searchBox .suggest-list td {
    font-size: 15px;
}
#searchBox .suggest-list td b {
    color: #FF6600;
}
#searchBox .suggest-list td span {
    font-size: 13px;
}
#searchBox .suggest-list tr.separator {
    background-color: #C2D0E7;
}
#searchBox input.submit {
    width: 70px;
    height: 29px;
    font-size: 18px;
    margin: 0 1px;
    padding: 0;
    background-image: url(/m2/i/english/btn_headersch2.gif);
    background-color: transparent;
    border-style: none;
    vertical-align: top;
}
#searchBox .on-off {
    color: #7F9DB9;
    cursor: pointer;
}
#selectionTabs .tab {
    float: left;
    width: 50px;
    display:inline-block;
    text-align: center;
    margin: 4px 2px 0 2px;
    color: #000000;
    border-width: 1px;
    border-style: solid;
    border-color: #C2D0E7;
    border-bottom-style: none;
    cursor: pointer;
    background-color: #EBEFF7;
    font-size: 15px;
}
#selectionTabs .tab.active {
    border-color: #C2D0E7;
    background-color: #FFFFFF;
}
#selectionGroups {
    clear: left;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #C2D0E7;
    padding: 4px;
}
#selectionGroups ul {
    display: none; 
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#selectionGroups ul#hot {
    display: block;
}
#selectionGroups li {
    float: left;
    width: 20%;
    font-size: 13px;
    text-align: center;
    line-height: 20px;
}
#selectionGroups span {
    color: #3366BB;
    cursor: pointer;
}
#selectionGroups span.highlight {
    color: #FF6600;
    text-decoration: underline;
}
#selectionNotice {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #C2D0E7;
    clear: both;
    color: #000000;
    font-size: 12px;
    padding: 4px;
}
</style>
</head>
<body>
<p id="searchBox" class="weather_input01"></p>
</body>
</html>